<template>


	<view class="item">
		<view class="top">

			<view class="top_one">
				<view class="icons_zuo">

				</view>
				<span v-for="(item,index) in list" :key="index" @click="lists(index)" :class="item" style="text-align: center;
			margin-left: 3vw;
			line-height: 10vw;
			width: 10vw;
			height: 10vw;color: aliceblue;"></span>
			</view>
			<view class="top_two">
				<view class="imgs">
					<img :src="users.avatar" alt="" />
				</view>
				<view class="texts">
					<p @click="names">{{users.nickname}}</p>
				</view>
			</view>
			<view class="top_three">
				<view class="monys" @click="pays">
					<view class="monys_qb">
						￥0
					</view>
					<view class="monys_icon">
						<span><span class="icon-cash"></span>&nbsp;&nbsp;&nbsp; 钱包</span>
					</view>
				</view>
				<view class="monys">
					<view class="monys_qb">
						0
					</view>
					<view class="monys_icon">
						<span class="icon-divide"></span>&nbsp; 积分
					</view>
				</view>
				<view class="monys">
					<view class="monys_qb">
						0
					</view>
					<view class="monys_icon" @click="collect">
						<span class="icon-collect_fill"></span>&nbsp; 收藏
					</view>
				</view>
			</view>
		</view>
		<view class="my_trade">
			<view class="my">
				我的交易
			</view>
		</view>
		<view class="trades">
			<view class="monys" @click="goumai">
				<dl>
					<dt>
						<span class="icon-buy"></span>
					</dt>
					<dd>
						我的购买
					</dd>
				</dl>
			</view>
			<view class="monys" @click="history">

				<dl>
					<dt>
						<span class="icon-recharge"></span>
					</dt>
					<dd>
						充值记录
					</dd>
				</dl>
			</view>

			<view class="monys" @click="historys">
				<dl>
					<dt>
						<span class="icon-log"></span>
					</dt>
					<dd>
						浏览历史
					</dd>
				</dl>
			</view>
			<view class="monys">

			</view>
		</view>
		<swiperVue style="width: 95%;height: 20vw;"></swiperVue>
		<view class="my_trades">
			<view class="my">
				我的服务
			</view>
		</view>
		<view class="trades">
			<view class="monys">
				<dl @click="steam()">
					<dt>
						<span class="icon-steam"><span class="path1"></span><span class="path2"></span><span
								class="path3"></span></span>
					</dt>
					<dd>
						steam链接
					</dd>
				</dl>
			</view>
			<view class="monys" @click="bangzhu">
				<dl>
					<dt>
						<span class="icon-help"></span>
					</dt>
					<dd>
						帮助中心
					</dd>
				</dl>
			</view>
				
			
			<view class="monys" @click="shows=true">
				<dl>
					<dt>
						<span class="icon-gen"></span>
					</dt>
					<dd>
						问题反馈
					</dd>
				</dl>
			</view>
			<view class="monys">
				<dl>
					<dt>
						<span class="icon-prize"></span>
					</dt>
					<dd>
						积分抽奖
					</dd>
				</dl>
			</view>
		</view>
	</view>


</template>

<script>
	import swiperVue from '../../components/index/swiper.vue';
	export default {

		data() {
			return {
		
			
				users: [],
				list: [
					"icon-Scan", "icon-warn", "icon-setup"
				],
				monys: ["1", "2", "3"],
				serve: ["1", "2", "3", "4"],
				data: [

				],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		components: {

			swiperVue
		},
		onShow() {
			let token = uni.getStorageSync('token')
			let user = uni.getStorageSync('user')
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			console.log(this.users)
			this.user()
			this.swiper()
			uni.request({
				method: 'POST',
				url: "/api/jewerly/index",

				success(res) {
					console.log(res)
				}
			})
		},
		methods: {
			bangzhu(){
					uni.navigateTo({
						url:"/pages/Information/Information"
					})
			},
			goumai(){
				uni.navigateTo({
					url:"/pages/My/purchase/purchase"
				})
			},
			historys(){
				uni.navigateTo({
					url:"/pages/history/history"
				})
			},
			swiper() {
				uni.request({
					url: "/api/index/banner",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					console.log(res)
				})
			},
			user() {
				uni.request({
					url: "/api/system/userinfo",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res=>{
					if(res.data.code==409||res.data.code==403||res.data.code==303){
						uni.removeStorageSync("user")
						uni.removeStorageSync("token")
						uni.removeStorageSync("datausers")
						uni.showToast({
							icon: "none",
							title: "请重新登录",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1000)
						return
					}
					this.users = res.data.data
					uni.setStorageSync("datausers", this.users)
				})
			},
			names() {
				uni.navigateTo({
					url: "/pages/My/name/name"
				})
			},
			history() {
				uni.navigateTo({
					url: "/pages/My/history/history"
				})
			},
			lists(index) {
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/message/message"
					})
				}
				if (index == 2) {
					uni.navigateTo({
						url: "/pages/My/set/set"
					})
				}
			},
			collect() {
				uni.navigateTo({
					url: "/pages/collection/collection"
				})
			},
			pays() {
				uni.navigateTo({
					url: "/pages/recharge/recharge"
				})
			},
			steam() {
				console.log("111")
				uni.navigateTo({
					url: "/pages/steam/steam",

				});
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<style>
	.icon-csgo {
		font-family: "icomoon";
	}

	.monys_qb {
		width: 100%;
		height: 50%;
		line-height: 17vw;
	}

	.monys_icon {
		width: 100%;
		height: 50%;
		line-height: 14vw;
	}

	.icon-csgo::before {
		content: "\e900";
	}

	.item {
		width: 100vw;
		height: 90vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.top {
		width: 100%;
		height: 65vw;
		background-color: #075eb0;
	}

	.top_one {
		width: 100%;
		height: 25%;
		/* background-color: red; */
		display: flex;

		.icons_zuo {
			width: 60%;
			height: 100%;
		}

		.icons_you {
			text-align: center;
			margin-left: 3vw;
			line-height: 10vw;
			width: 10vw;
			height: 10vw;
		}
	}

	.top_two {
		width: 100%;
		height: 25vw;
		display: flex;

		.imgs {
			width: 20vw;
			height: 20vw;
			background-color: black;
			border-radius: 50%;
			margin-left: 3vw;

		}

		.texts {
			flex: 1;
			line-height: 20vw;
			font-size: 4vw;
			color: aliceblue;
			margin-left: 3vw;
		}
	}

	.top_three {
		width: 100%;
		height: 24vw;
		background-color: #064e92;
		display: flex;

		.monys {
			flex: 1;
			text-align: center;
			line-height: 15vw;
			/* line-height: 20vw; */
			color: #e2e9f1;
			font-size: 4vw;
		}
	}

	.monys dl {
		width: 100%;
		height: 100%;
	}

	.monys dl dt {
		width: 100%;
		height: 50%;
		line-height: 20vw;
		font-size: 8vw;
	}

	.monys dl dd {
		width: 100%;
		height: 50%;
		line-height: 10vw;
		font-size: 4vw;
		color: #616161;
	}

	.swipers {
		width: 95%;
		
		margin: 0 auto;

	}

	.my_trade {
		width: 100%;
		height: 15vw;
		/* overflow: hidden; */
	}
	.my_trades {
		width: 100%;
		height: 15vw;
		margin-top: 22vw;
	}
	.my {
		width: 90%;
		height: 14vw;
		border-bottom: 1px solid #ccc;
		margin: 0 auto;
		font-weight: bold;
		font-size: 4vw;
		line-height: 14vw;
		margin-top: 5vw;
	}

	.trades {
		width: 100%;
		height: 27vw;
		display: flex;

		.monys {
			flex: 1;
			text-align: center;
			line-height: 27vw;
			color: black;
			margin-top: 2vw;
		}
	}
</style>